<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />
    <div class="Main">
      <el-card class="MainCard" shadow="always" :body-style="{ padding: '0' }">
        <div class="MainCardDiv">
          <div class="MainCardDivLeft">
            <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="621" />
          </div>
          <div class="MainCardDivMain">
            <h2 class="MainCardDivMainH2">订单明细</h2>
            <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="621" />
          </div>
          <div class="MainCardDivRight">
            <div class="MainCardDivRightLeft">
              <div style="margin-top: -10px">
                <el-form-item>
                  <el-checkbox label="新旧款未定义" size="default" />
                </el-form-item>
              </div>

              <div style="margin-top: -20px">
                <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="621" />
              </div>
            </div>

            <div class="MainCardDivRightMain">
              <div class="timeline">
                <div class="timeline-dot"></div>
                <h1 class="MainH1 timelineH1">裁剪工艺(本场)</h1>
                <div class="timeline-dot"></div>
              </div>
              <Table :tableData="tableData4" :tableHeader="tableHeader4" :TableHeight="621" />
            </div>

            <div class="MainCardDivRightRight">
              <div class="timeline">
                <div class="timeline-dot"></div>
                <h1 class="MainH1 timelineH1">裁剪工艺(外发)</h1>
                <div class="timeline-dot"></div>
              </div>
              <Table :tableData="tableData5" :tableHeader="tableHeader5" :TableHeight="621" />
            </div>
          </div>
        </div>

        <div class="MainCardBottom">
          <div style="display: flex">
            <div class="MainCardBottomDivO"></div>
            <span class="MainCardBottomDivspan"> 工厂货号绿色代表:该工厂货号+配色已检核 </span>
          </div>

          <div style="display: flex">
            <div class="MainCardBottomDivT"></div>
            <span class="MainCardBottomDivspan" style=""> 指令号为红色代表:有指令已经配套OK不能再更改裁剪工艺 </span>
          </div>

          <div>
            <el-button style="background-color: #e7e7e7; width: 60px; color: #000000; border: none" type="info" size="small">保存</el-button>
            <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">打印</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ColorDefinitionDataModification'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入工厂货号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '样品类型',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '未检核'
  },
  {
    type: 'checkbox',
    checkboxLabel: '已检核'
  },
  {
    type: 'checkbox',
    checkboxLabel: '全部'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  },
  {
    type: 'button',
    checkboxLabel: '取消检核'
  },
  {
    type: 'button',
    checkboxLabel: '更新资料'
  }
])

const tableHeader = ref([
  {
    label: '指令号',
    prop: 'instruction',
    width: '115px'
  },
  {
    label: '检核状态',
    prop: 'shape',
    width: '115px'
  },
  {
    label: '工厂货号',
    prop: 'color',
    width: '115px'
  },
  {
    label: '颜色',
    prop: 'orderQuantity',
    width: '115px'
  },
  {
    label: '楦头',
    prop: 'stockQuantity',
    width: '115px'
  },
  {
    label: '大底',
    prop: 'stockQuantity',
    width: '115px'
  },
  {
    label: '图片',
    fixed: true,
    prop: 'stockQuantity',
    width: '115px'
  }
])

const tableData = ref([
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  },
  {
    instruction: '指令1',
    shape: '型体1',
    color: '颜色1',
    orderQuantity: '订单数量1',
    stockQuantity: '库存数量1'
  }
])

const tableHeader2 = ref([
  {
    label: '指令号',
    prop: 'manufacturer',
    width: '95'
  },
  {
    label: '样品类型',
    prop: 'quantity',
    width: '95'
  }
])

const tableData2 = ref([
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  },
  {
    manufacturer: '厂商1',
    quantity: '数量1'
  }
])

const tableHeader3 = ref([
  {
    label: '新版',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '旧版',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '改版',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  }
])

const tableData3 = ref([
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  }
])

const tableHeader4 = ref([
  {
    label: '电雕',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '印刷/胶印',
    width: '52',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '改版',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '无缝',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '高频/热切',
    width: '52',
    type: 'checkbox',
    prop: 'checkboxArrange'
  }
])

const tableData4 = ref([
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  }
])

const tableHeader5 = ref([
  {
    label: '外发胶印',
    width: '52',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '分化',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '电绣',
    width: '40',
    type: 'checkbox',
    prop: 'checkboxArrange'
  },
  {
    label: '外发热切',
    width: '52',
    type: 'checkbox',
    prop: 'checkboxArrange'
  }
])

const tableData5 = ref([
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  },
  {
    department: '部门1',
    quantity: '数量1'
  }
])
</script>

<style lang="less" scoped>
// 主体
.Main {
  width: 100%;
  height: 720px;
  margin-top: 20px;
}

// 卡片
.MainCard {
  width: 100%;
  height: 100%;
}

// 主
.MainCardDiv {
  width: 100%;
  height: 650px;
  display: flex;

  .MainCardDivLeft {
    width: 50%;
    height: 650px;
    padding: 20px 0 0 20px;
  }

  .MainCardDivMain {
    width: 15%;
    height: 650px;
    padding-left: 20px;

    .MainCardDivMainH2 {
      font-size: 16px;
    }
  }

  .MainCardDivRight {
    width: 35%;
    height: 650px;
    display: flex;

    .MainCardDivRightLeft {
      width: 28%;
      height: 650px;
      margin-top: 0px;
    }

    .MainCardDivRightMain {
      width: 40%;
      height: 650px;
      margin-left: 20px;
    }

    .MainCardDivRightRight {
      width: 40%;
      height: 650px;
      margin-left: 20px;

      .MainH1 {
        color: #ff3838;
      }

      .timeline-dot {
        width: 40px;
        height: 1px;
        background: #e7e7e7;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-top: 10px;
      }
    }
  }
}

// 时间线
.timeline {
  display: flex;

  .timeline-dot {
    width: 58px;
    height: 1px;
    background: #e7e7e7;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    margin-top: 10px;
  }

  .timelineH1 {
    font-size: 16px;
    color: #5daeff;
  }
}

// 底部
.MainCardBottom {
  width: 98.5%;
  height: 60px;
  margin-left: 20px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

// 底部色块儿
.MainCardBottomDivT {
  width: 94px;
  height: 26px;
  background: #ff3838;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  display: flex;
}

.MainCardBottomDivO {
  width: 94px;
  height: 26px;
  background: #3fff38;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}

.MainCardBottomDivspan {
  font-size: 12px;
  margin-top: 5px;
  font-weight: 600;
}
</style>
